<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-07-01 00:20:41
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-09-06 21:12:41
 * @FilePath: \dance\pages\teacher\register.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="register">
    <!-- 头部 -->
    <uv-status-bar></uv-status-bar>
    <view class="register-navbar">
      <!--自定义头部 -->
      <zy-navbar></zy-navbar>
    </view>
    <view class="register-title"> {{ routrVal ? '编辑资料' : '老师入驻申请' }} </view>
    <!-- 当前人还未开始审核 -->
    <template v-if="registerApproved === -1 || routrVal">
      <!--<template v-if="!routrVal">-->
      <view class="register-avatar">
        <button class="reset-button register-avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
          <uv-avatar :src="formModel.headerpic" size="178rpx" mode="aspectFill"></uv-avatar>
          <text class="register-avatar-button-text">修改头像</text>
        </button>
      </view>
      <uv-form
        labelPosition="top"
        :labelStyle="{ color: '#fff' }"
        :model="formModel"
        :rules="rules"
        ref="formRef"
        :borderBottom="false"
        labelWidth="150"
        class="register-form"
      >
        <uv-form-item label="昵称" prop="username" required>
          <uv-input type="nickname" v-model="formModel.username" placeholder="请输入昵称" border="none" @change="onChangeUserName"> </uv-input>
        </uv-form-item>
        <uv-form-item label="真实姓名" prop="realName" required>
          <uv-input v-model="formModel.realName" placeholder="请输入真实姓名" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="联系方式" prop="phone" required>
          <uv-input type="number" v-model="formModel.phone" placeholder="请输入联系方式" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="微信号" prop="wechatNo" v-if="envVersion">
          <uv-input v-model="formModel.wechatNo" placeholder="用于购买的用户，方便联系" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="擅长舞种" prop="danceType" @click="onSelectDance">
          <uv-input v-model="formModel.danceType" disabled placeholder="请选择舞种" border="none">
            <template v-slot:suffix>
              <uv-icon name="arrow-right"></uv-icon>
            </template>
          </uv-input>
        </uv-form-item>
        <uv-form-item label="教学风格" prop="style">
          <uv-textarea v-model="formModel.style" placeholder="请输入教学风格" border="none"> </uv-textarea>
        </uv-form-item>
        <uv-form-item label="简介" prop="description">
          <uv-textarea v-model="formModel.description" placeholder="请输入简介" border="none"> </uv-textarea>
        </uv-form-item>
      </uv-form>
      <view class="register-button">
        <view class="register-button-submit" @click="onSubmit">保存</view>
      </view>
    </template>
    <template v-else-if="registerApproved === 0">
      <view class="register-avatar">
        <uv-avatar :src="formModel.headerpic" size="178rpx" mode="aspectFill"></uv-avatar>
      </view>
      <view class="register-info">
        <view class="register-info-title">提交成功</view>
        <view class="register-info-title">正在通过人工审核</view>
        <view class="register-info-title">审核通过后重新登入以更新页面</view>
      </view>
      <view class="register-button2 register-button">
        <view class="register-button-submit register-button2-submit" @click="onLeft">确定</view>
      </view>
    </template>
    <template v-else-if="registerApproved === 2">
      <view class="register-avatar">
        <uv-avatar :src="formModel.headerpic" size="178rpx" mode="aspectFill"></uv-avatar>
      </view>
      <view class="register-info">
        <view class="register-info-title">很遗憾</view>
        <view class="register-info-title">未通过审核</view>
        <view class="register-info-title">后续还有更多机会</view>
      </view>
      <view class="register-button2 register-button">
        <view class="register-button-submit register-button2-submit" @click="onLeft">确定</view>
      </view>
    </template>
  </view>
  <uv-safe-bottom></uv-safe-bottom>
  <!-- 选择舞种 -->
  <!-- <uv-action-sheet ref="danceRef" :actions="danceList" title="请选择舞种" @select="onChangeDance"> </uv-action-sheet> -->
  <popupHttp ref="danceRef" :data="danceList" title="请选择舞种" @onSuccess="onDanceSuccess" />
  <uv-toast ref="toastRef"></uv-toast>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { uploadFn, toastFn, onLeft } from '@/common/js/fn.js';
  import { onLoad } from '@dcloudio/uni-app';
  import store from '@/store/index.js'; //需要引入store
  let envVersion = ref(false);
  // #ifdef MP-WEIXIN
  const { miniProgram } = uni.getAccountInfoSync();
  envVersion.value = miniProgram.envVersion === 'release';
  // #endif
  let { state, commit } = store;
  let formModel = reactive({
    username: '',
    headerpic: '',
    phone: '',
    danceIDS: [],
    danceType: [],
    style: '',
    description: '',
    serial: '',
    realName: '',
    wechatNo: ''
  });
  // #region 舞种
  // 获取舞种
  let danceList = ref([]);
  let danceRef = ref(),
    toastRef = ref();
  const getDanceType = async () => {
    let dances = state.vuex_dances || [];
    // 如果没有的话
    if (!dances.length) {
      dances = await uni.$uv.http.post('app/setting/dances', {
        classify: 1
      });
      // 把数据存到vuex
      commit('$uStore', {
        name: 'vuex_dances',
        value: dances
      });
    }
    if (formModel.danceIDS.length) {
      dances.map(r => {
        r.active = formModel.danceIDS.includes(r.id);
      });
    }
    danceList.value = dances;
  };
  // 点击选择舞种
  const onSelectDance = async () => {
    await getDanceType();
    danceRef.value.open();
  };
  // 选中舞种项目
  const onDanceSuccess = val => {
    formModel.danceType = val.map(item => item.name);
    formModel.danceIDS = val.map(item => item.id);
  };
  // #endregion

  // 获取头像的回调
  const onChooseavatar = async val => {
    let res = await uploadFn(val.detail.avatarUrl);
    formModel.headerpic = res;
    toastFn(toastRef.value, '更新头像成功', 'success');
  };
  // 昵称回调
  const onChangeUserName = async val => {
    formModel.username = typeof val === 'string' ? val : val.detail.value;
  };
  let rules = reactive({
    phone: [
      { required: true, message: '此为必填字段', trigger: ['blur', 'change'] },
      {
        asyncValidator: (rule, value, callback) => {
          if (!uni.$uv.test.mobile(value)) {
            // callback(new Error('请输入正确的手机号'));
            return;
          }
          callback();
        }
      }
    ],
    realName: [{ required: true, message: '此为必填字段', trigger: ['blur', 'change'] }],
    username: [{ required: true, message: '此为必填字段', trigger: ['blur', 'change'] }]
  });
  let routrVal = ref(false);
  onLoad(val => {
    routrVal.value = val.isEdit === '1';
    let { teacher = {} } = state.vuex_user;
    formModel.headerpic = teacher?.profilePhoto || state.vuex_user?.headerpic;
    formModel.username = teacher?.username || state.vuex_user?.nickname;
    formModel.serial = state.vuex_user.serial;
    registerApproved.value = teacher.approved;

    // 如果是修改的话，就是这样
    if (routrVal.value) {
      if (teacher.dances.length) {
        formModel.danceType = teacher.dances.map(item => item.name);
        formModel.danceIDS = teacher.dances.map(item => item.id);
      }
      formModel.style = teacher.style;
      formModel.realName = teacher.realName;
      formModel.wechatNo = teacher.wechatNo;
      formModel.phone = teacher.phone;
      formModel.description = teacher.description?.content;
    }
  });
  // 申请老师
  const httpSave = async () => {
    await uni.$uv.http.post('app/teacher/apply', formModel);
    toastFn(toastRef.value, '提交成功，等待工作人员联系', 'success');
    registerApproved.value = 0;
  };
  // 老师修改自己的数据
  const httpEditSave = async () => {
    // 成功了记得要更新 vuex
    let params = JSON.parse(JSON.stringify(formModel));
    params.id = state.vuex_user.teacher.id;
    await uni.$uv.http.post('app/teacher/update', params);
    toastFn(toastRef.value, '保存成功', 'success');
    let data = await uni.$uv.http.post('app/wechat/user');
    commit('$uStore', {
      name: 'vuex_user',
      value: data
    });
    onLeft();
  };

  // 是否开始审核了
  let registerApproved = ref(-1);
  let formRef = ref();
  // 提交
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        if (routrVal.value) {
          httpEditSave();
          return;
        }
        httpSave();
      })
      .catch(() => {});
  };
</script>

<style lang="scss" scoped>
  .register {
    background-color: #1d1f24;
    min-height: 100vh;
    color: #fff;
    &-title {
      font-size: 35rpx;
      padding-top: $dance-navbar-top-height;
      text-align: center;
      margin-bottom: 51rpx;
    }
    &-avatar {
      display: flex;
      justify-content: center;
      position: relative;
      &-button {
        overflow: inherit;
        &-text {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(80%);
          color: #fff;
          white-space: nowrap;
        }
      }
    }
    &-form {
      margin: 0 45rpx;
      :deep(.uv-input),
      :deep(.uv-textarea) {
        background-color: #959595 !important;
        color: #fff;
        padding: 8.5rpx 17rpx !important;
        height: 82rpx;
        font-size: 28rpx;
        box-sizing: border-box;
        flex: auto;
        flex-basis: 1 !important;
        input,
        .uni-textarea-textarea,
        textarea {
          color: #fff !important;
        }
      }
      :deep(.uv-textarea) {
        height: 140rpx;
      }
    }
    &-button {
      display: flex;
      justify-content: flex-end;
      margin-right: 45rpx;
      &-submit {
        height: 70rpx;
        width: 297rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $dance-main-color;
        border-radius: 78rpx;
        margin-left: 50%;
        margin-top: 35rpx;
        font-size: 35rpx;
        font-weight: bold;
      }
    }
    &-button2 {
      justify-content: center;
      margin: 0;
      &-submit {
        margin: 0;
        margin-top: 248rpx;
      }
    }
    &-info {
      text-align: center;
      font-size: 28rpx;
      margin-top: 148rpx;
      &-title {
        margin-bottom: 8.5rpx;
      }
    }
  }
</style>
